<template>
  <div class="my-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="我的" />

    <div class="header login">
      <div class="login-btn" @click="!user && $router.push('/login')">
        <van-image v-if="user && userInfo" round class="avatar" :src="userInfo.avatar || require('@/assets/avatar.jpg')" fit="cover" />
        <div v-else class="login-item">
          <van-icon name="user-circle-o" />
        </div>
        <span v-if="user && userInfo" class="text">{{ userInfo.nickname || userInfo.username }}</span>
        <span v-else class="text">登录 / 注册</span>
      </div>
    </div>

    <!-- 个人资料关注、已联系家政员等区域 -->
    <ul class="data-stats">
      <li class="data-item" @click="$router.push('/user/personal')">
        <span class="count"><van-icon name="manager-o"/></span>
        <span class="text">个人资料</span>
      </li>
      <li class="data-item" @click="$router.push('/user/follow')">
        <span class="count"><van-icon name="flower-o"/></span>
        <span class="text">我的关注</span>
      </li>
      <li class="data-item" @click="$router.push('/user/comment')">
        <span class="count"><van-icon name="comment-o"/></span>
        <span class="text">我的评价</span>
      </li>
      <li class="data-item" @click="$router.push('/user/contact')">
        <span class="count"><van-icon name="service-o"/></span>
        <span class="text">已联系家政员</span>
      </li>
    </ul>

    <!-- 布局已登录和未登录共有的区域 -->
    <van-cell icon="coupon-o" class="mb-9" title="找家政服务记录" is-link />
    <van-cell icon="comment-o" title="家政求职记录" is-link />
    <van-cell icon="passed" class="mb-9" title="身份认证通道" is-link @click="show = true" />
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" close-on-click-action />
    <van-cell icon="info-o" title="关于我们" is-link to="/my/about" />
    <!-- 登录后显示 -->
    <van-cell v-if="user" class="mb-9 logout-cell" title="退出登录" @click="logout" />
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
import { mapState } from 'vuex'

export default {
  name: 'My',
  components: {},
  props: {},
  data () {
    return {
      show: false,
      actions: [{ name: '家服人员授权认证' }, { name: '家服公司管理员认证' }],
      userInfo: null
    }
  },
  computed: { ...mapState(['user']) },
  watch: {},
  created () {
    if (this.user) {
      this.loadUserInfo()
    }
  },
  mounted () {},
  methods: {
    async loadUserInfo () {
      this.userInfo = await getUserInfo()
    },
    logout () {
      this.$dialog
        .confirm({ title: '确定退出吗' })
        .then(() => this.$store.commit('setUser', null))
    },
    onSelect (item) {
      if (item.name === '家服人员授权认证') {
        this.$router.push('/my/authorize/staff')
      } else {
        this.$router.push('/my/authorize/admin')
      }
    }
  }
}
</script>

<style scoped lang="less">
.my-container {
  // 布局已登录和未登录公共样式
  .header {
    height: 361px;
    background-color: #3f51b5 !important;
  }

  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    .login-btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .login-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 132px;
        height: 132px;
        margin-bottom: 15px;
        background-color: #fff;
        border-radius: 50%;
        i.van-icon {
          font-size: 80px;
          color: #3296fa;
        }
      }
      .text {
        font-size: 28px;
        color: #fff;
      }
      .avatar {
        width: 136px;
        height: 136px;
        margin-bottom: 20px;
      }
    }
  }

  .user-info {
    .base-info {
      // height: 231px;
      padding: 76px 32px 23px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        .name {
          font-size: 30px;
          color: #fff;
        }
      }
    }
  }

  .data-stats {
    display: flex;
    background-color: #fff;
    .data-item {
      height: 130px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #333;
      .count {
        font-size: 36px;
      }
      .text {
        font-size: 23px;
      }
    }
  }

  // 宫格导航样式
  .grid-nav {
    .grid-item {
      height: 141px;
      i.redchuak {
        font-size: 45px;
      }
      .redchuak-shoucang {
        color: #eb5253;
      }
      .redchuak-lishi {
        color: #ff9d1d;
      }
      span.text {
        font-size: 28px;
      }
    }
  }

  // 布局已登录和未登录共有的区域的样式布局
  .logout-cell {
    text-align: center;
    color: #d86262;
  }
  .mb-9 {
    margin-top: 9px;
  }
}
</style>
